import React, { Component } from 'react'
import { Collapse, Button, message, Modal } from 'antd';
import './resource_item.less'
import { getMemberInfo } from '../../../utils/auth'
export default class ResourceItem extends Component {

  state = {
    isLogin: false
  }

  componentDidMount() {
    if (getMemberInfo().id) {
      this.setState({
        isLogin: true
      })
    }
  }

  copyPath = () => {
    const path = this.pathNode.innerText;
    let oInput = document.createElement('input');
    oInput.value = path;
    document.body.appendChild(oInput);
    oInput.select(); // 选择对象
    document.execCommand("Copy"); // 执行浏览器复制命令
    oInput.className = 'oInput';
    oInput.style.display = 'none';
    message.success("复制路径成功！")
  }
  showCode = () => {
    Modal.success({
      content: this.props.code ? this.props.code : '无',
    });
  }
  handleOpen = () => {
    const { isLogin } = this.state
    if (!isLogin) message.warning("Sorry，登录后方可获取资源信息")
  }
  render() {
    const { isLogin } = this.state
    const { url } = this.props
    return (
      <li className="resource-item-container" onClick={this.handleOpen}>
        <Collapse collapsible={isLogin ? '' : 'disabled'} ghost>
          <Collapse.Panel header={this.props.children} key="1">
            <div className="content-hide">
              <div className="url-link">
                <h4>资源链接：</h4>
                <p ref={c => this.pathNode = c}> <a target="_href" href={url}>{url}</a> </p>
                <Button type="link" onClick={this.copyPath}>复制路径</Button>
                <Button type="link" onClick={this.showCode}>提取码</Button>
              </div>
            </div>
          </Collapse.Panel>
        </Collapse>
      </li>
    )
  }
}
